<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue'
import {CascaderProps, notification} from 'ant-design-vue';
import {getProvincesCities} from "@/api/common/common.ts";
import type { SalesDetail } from "@/api/sales/sales-list.ts";


defineProps({
  showSubmit: {
    type: Boolean,
    default: false,
  },
})
const formRef = ref<FormInstance>()

// 选中销售类型时判断当前选中项并依据情况进行显示新填写框
async function changeTypeV(){

}

async function handleSubmit() {
  try {
    const values = await formRef.value?.validateFields()
    return values
  }
  catch (errorInfo) {
    console.log('Failed:', errorInfo)
  }
}
// 生成一个销售订单号
/*function generateIdByDate(): string {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  return `${year}${month}${day}${hours}${minutes}${seconds}`;
}*/

const formSales = reactive<SalesDetail>({
  salesDate: undefined,
  customerId: undefined,
  provincesCode: undefined,
  citiesCode: undefined,
  salesType:undefined,
  salesTotalPrice:0,
  salesActualTotalPrice:0,
  salesOffsetAmount:0,
  salesRemarks:undefined,
  salesStatus:0,
  salesPerson:undefined,
  salesPaymentStatus:0,
})

defineExpose({
  handleSubmit,
})

// 省市区所有数据
const allAreasList = shallowRef<CascaderProps>([])
const changeArea = (vl: any) => {
  formSales.provincesCode = vl[0]?? 0;
  formSales.citiesCode = vl[1]?? 0;
}

// 初始省市区数据
async function init() {
  try {
    const { data } = await getProvincesCities()
    allAreasList.value = data?? []
  }
  catch (e) {
    console.log(e)
  }
}



onMounted(() => {
  init()
})
</script>

<template>
  <a-form ref="formRef" :model="formSales" @submit="handleSubmit">
    <a-row class="form-row" :gutter="20" justify="space-between">
      <a-col :span="5">
        <a-form-item name="salesDate" :rules="[{ required: true, message: '请选择销售日期' }]" label="销售日期">
          <a-date-picker v-model:value="formSales.salesDate" style="width: 100%"/>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="province" label="省份/城市" :rules="[{ required: false, message: '请选择省份/城市', trigger:'change'}]">
          <a-cascader :options="allAreasList" placeholder="请选择省份/城市" @change="changeArea"/>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item
            name="url"
            :rules="[{ required: true, message: '请选择客户' }]"
            label="关联客户"
        >
          <a-input v-model:value="formSales.customerId" placeholder="请选择客户" />
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="salesType" label="销售类型" :rules="[{ required: true, message: '请选择销售类型' }]">
          <a-select v-model:value="formSales.salesType" placeholder="请选择销售类型" @change="changeTypeV">
            <a-select-option value="1">
              正常销售
            </a-select-option>
            <a-select-option value="2">
              全额顶销
            </a-select-option>
            <a-select-option value="3">
              部分顶销
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="20" justify="space-between">
      <a-col :span="5">
        <a-form-item name="salesTotalPrice" label="自动总金额" >
          <a-input-number :min="0" readonly v-model:value="formSales.salesTotalPrice" addon-after="￥" placeholder="自动依据下方销售明细计算金额" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"/>
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="salesActualTotalPrice" label="实际销售总金额" :rules="[{ required: true, message: '请输入实际销售总金额' }]" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')">
          <a-input-number :min="0" v-model:value="formSales.salesActualTotalPrice" addon-after="￥" placeholder="请输入实际销售总金额" />
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="salesOffsetAmount" label="抵消采购项金额" >
          <a-input-number :min="0" v-model:value="formSales.salesOffsetAmount" addon-after="￥" placeholder="请输入抵消采购项金额" :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" />
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-form-item name="salesPerson" label="销售人" :rules="[{ required: true, message: '请填写销售人' }]">
          <a-input v-model:value="formSales.salesPerson" placeholder="请填写销售人" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16" justify="space-between">
      <a-col :span="10">
        <a-form-item name="salesRemarks" label="备注" >
          <a-textarea v-model:value="formSales.salesRemarks" placeholder="请填写描述备注信息" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item v-if="showSubmit">
      <a-button html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>

<style scoped>

</style>